<template>
  <div class="rightBodyContent">
    <el-button type="primary" plain @click="backlist" size="small" class="mt-20"><i class="el-icon-back"></i>返回列表
    </el-button>
    <div class="archives-box" v-if="userInfo">
      <div class="infobox-left infobox-box">
        <div class="infobox-right-left-userline">
          <span></span>个人信息
        </div>
        <div class="infobox-right-left-box">
          <div class="infobox-user-left">
<!--            <imgUploadModle @getChildValue="getChildValue" imgNumber="1" page="studentPic"-->
<!--                            :picSrc="userInfo.pic"></imgUploadModle>-->
            <img src="userInfo.pic" alt="" width="130" v-if="userInfo.pic">
            <img src="@/assets/imageAdmin/defultimg.jpg" alt="" v-else>
          </div>
          <div class="infobox-user-right">
            <p><span>姓名：</span><span>{{ userInfo.name }}</span></p>
            <p><span>性别：</span><span>{{ userInfo.sex }}</span></p>
            <p><span>所属班级：</span><span>{{ userInfo.classes.class_name }}</span></p>
            <p><span>学籍号：</span><span>{{ userInfo.student_code }}</span></p>
            <p><span>入学时间：</span><span>{{ userInfo.enrol_time }}</span></p>
            <p><span>联系方式：</span><span>--</span></p>
            <div class="infobox-user-right-botton mt-20">
              <el-button size="small" @click="eidtStudentInfo()">编辑详情</el-button>
              <!--              <el-button size="small" @click="bttonFn()">查看评价</el-button>-->
            </div>
            <span class="border-line-right"></span>
          </div>
          <div class="infobox-user-right-line">
            <div class="infobox-user-right-list">
              异常事项
              <div style="margin-top: 10px;" v-if="userInfo.disease_ids.length">
                <el-tag
                    class="tag_body"
                    v-for="item in userInfo.disease_ids" :key="item.id">
                  <el-tooltip class="item" placement="bottom" effect="light">
                    <div slot="content">
                      <p class="disease_title" style="margin-bottom: 5px;">注意事项</p>
                      <div class="disease_list" v-for="items in item.careful" :key="items.id" style="max-width: 400px;">
                        <span>【{{ items.cate.name }}】:</span>{{ items.description }}
                      </div>
                    </div>
                    <span>{{ item.name }}</span>
                  </el-tooltip>
                </el-tag>
              </div>
              <div style="margin-top: 10px;" v-else>无</div>
            </div>
          </div>
        </div>
      </div>
      <div class="infobox-right infobox-box">
        <div class="infobox-right-left-userline">
          <span></span>领域发展
        </div>
        <div class="infobox-right-right-progress" v-if="areaTop">
          <div class="progress-list" v-for="item in areaTop" :key="item.id">
            <span>{{ item.name }}</span>
            <div class="progress-list-right">
              <div class="progresswrapper">
                <div class="pro" :style="{'width':item.areaWidth}"><em>{{ item.areaWidth }}</em></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="infobox-box">
      <div class="infobox-right-left-userline">
        <span></span>分布
      </div>
      <div class="echartsBox">
        <div class="progress-list-tips">
          <div class="progress-list-tips-list" v-for="(item,index) in mapData">
            <span></span>{{ item.name }}-幅度{{ item.score }}，当前 {{ item.number }}
          </div>
        </div>
        <div class="echartsBox-left">
          <div id="echarts" class="home_top_echarts"></div>
        </div>

      </div>
    </div>
    <studentEdit :visible.sync="detailVisible" :studentId="editId" @initFn="InitFn"></studentEdit>
  </div>
</template>

<script>
let echarts = require('echarts')
import studentEdit from '@/views/admin/Campus/studentDetail'

export default {
  components: {
    studentEdit
  },
  data() {
    return {
      detailVisible: false,
      echartsLine: [],
      width: ['0%', '0%', '0%', '0%', '0%'],
      userInfo: null,
      editId: this.$route.query.editId,
      areaTop: null, // 五大领域
      mapData: [], // 领域细分
      echartsData: [] // 图形数据
    }
  },
  created() {
    this.InitFn()
    this.studentPointFn()
  },
  methods: {
    InitFn() {
      console.log('学生请求详情')
      this.$fetch(this.api.admin_student_edit, {
        id: this.editId
      }).then((response) => {
        if (response.code === 0) {
          this.userInfo = response.vo
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    studentPointFn() {
      console.log('计算五大领域百分比')
      this.$fetch(this.api.student.studentPoint, {
        student_id: this.editId
      }).then((response) => {
        this.mapData = response.detail
        let echartIndicator = []
        let seriesData = []
        let list_ = {}
        for (let i in response.detail) {
          if (!list_[response.detail[i].parents.id]) {
            list_[response.detail[i].parents.id] = response.detail[i].parents
            list_[response.detail[i].parents.id].list = []
          }
          list_[response.detail[i].parents.id].list.push(response.detail[i])
          echartIndicator.push({text: response.detail[i].name, max: response.detail[i].score})
          seriesData.push(response.detail[i].number)
        }
        // 计算五大领域百分比
        for (let j in list_) {
          let areaScore = 0 // 领域总分值相加
          let areaNumber = 0 // 领域总得分值相加
          for (let n in list_[j].list) {
            areaScore += list_[j].list[n].score
            areaNumber += list_[j].list[n].number
          }
          list_[j].areaScore = areaScore
          list_[j].areaNumber = areaNumber
          list_[j].areaWidth = areaNumber ? ((areaNumber / areaScore) * 100).toFixed(2) + '%' : '0%'
        }
        console.log('收到的数据内容123', list_)
        this.areaTop = list_
        this.echartsthree(echartIndicator, seriesData)
      }).catch((err) => {
        console.log(err)
      })
    },
    echartsthree(echartIndicator, seriesData) {
      this.$nextTick(function () {
        let myChart = echarts.init(document.getElementById('echarts'))
        let option = {
          title: {
            text: ''
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            left: 'center',
            data: ['全面发展矩阵图']
          },
          radar: [
            {
              indicator: echartIndicator,
              center: ['50%', '50%'],
              radius: 180
            }
          ],
          series: [
            {
              type: 'radar',
              radarIndex: 0,
              areaStyle: {},
              data: [
                {
                  name: '全面发展矩阵图',
                  value: seriesData,
                  label: {
                    show: true,
                    formatter: function (params) {
                      return params.value
                    }
                  },
                  itemStyle: {
                    opacity: 0.8, // 图表中各个图区域的透明度
                    color: '#01a439' // 图表中各个图区域的颜色
                  }
                }
              ]
            }
          ]
        }
        myChart.setOption(option)
      })
    },
    backlist() {
      this.$router.go(-1)
    },
    bttonFn() {
      this.$confirm('尚未开启！', '提示', {
        confirmButtonText: '确定',
        showCancelButton: false,
        type: 'warning'
      }).then(() => {
      }).catch(() => {
      })
    },
    async getChildValue(option) {
      console.log('获取到的内容信息：', option)
      if (option) {
        let {data} = await this.$post(this.api.student.picEdit, {id: this.editId, pic: option})
        if (!data.code) {
          this.userInfo.pic = option
          console.log(data)
        }
      }
    },
    eidtStudentInfo() {
      this.detailVisible = !this.detailVisible
    }
  },
  mounted() {
  }
}
</script>
<style scoped>
.tag_body{
  cursor: pointer;
}
.archives-box {
  display: flex;
  margin-top: 10px;
}

.infobox-box {
  box-shadow: 0 0 10px #ddd;
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 10px;
}

.infobox-left {
  flex: 1;
  margin-right: 10px;
}

.infobox-right {
  width: 550px;
}

.infobox-user-left img {
  width: 90px;
  height: auto;
  box-shadow: 0 4px 8px #ddd;
}

.infobox-right-left-box {
  display: flex;

}

.infobox-user-right {
  flex: 1;
  padding-left: 20px;
  position: relative;
}

.border-line-right {
  position: absolute;
  top: 20px;
  right: 0px;
  display: block;
  width: 1px;
  height: 150px;
  background: #eee;
}

.infobox-user-right-line {
  flex: 1;
  padding-left: 15px;
}

.progress-list {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.progress-list span {
  display: block;
  width: 53px;
  padding-right: 20px;
  text-align: right;
  color: #777;
}

.progress-list:last-child {
  margin-bottom: 0;
}

.progress-list-right {
  flex: 1;
  padding-right: 38px;
}

.infobox-right-left-userline {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 14px;
}

.infobox-right-left-userline span {
  display: block;
  width: 5px;
  height: 15px;
  border-radius: 2px;
  background: #1b8de5;
  margin-right: 10px;
}

.infobox-user-right p {
  margin-bottom: 6px;
  color: #444;
}

.progress-list-tips-list {
  font-size: 12px;
  display: flex;
  color: #0066b5;
  align-items: center;
  margin-bottom: 10px;
}

.progress-list-tips-list span {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background: #0066b5;
  margin-right: 5px;
}

/*background-image : linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent)*/
.progresswrapper {
  width: 100%;
  height: 8px;
  position: relative;
  border-radius: 7px;
  background: #f8f8f8;
}

.pro {
  width: 90%;
  height: 100%;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-color: #409EFF;
  background-size: 40px 40px;
  animation: progressbar 2s linear infinite;
  border-radius: 7px;
  text-align: right;
  color: #fff;
  font-size: 12px;
  position: relative;
}

.progresswrapper em {
  font-style: normal;
  position: absolute;
  right: -42px;
  color: #333;
  line-height: 8px;
}

@keyframes progressbar {
  0% {
    background-position: 40px 0
  }
  100% {
    background-position: 0 0
  }
}

#echarts {
  height: 500px;
  width: 100%;
}

.echartsBox {
  display: flex;
}

.echartsBox .progress-list-tips {
  width: 210px;
}

.echartsBox .progress-list-tips .progress-list-tips-list {
  font-size: 14px;
}

.echartsBox-left {
  flex: 1;
}
</style>
